<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物系统</title>
		<link rel="stylesheet" type="text/css" href="./css/26.css"/>
		<script src="js/26.js"></script>
	</head>
	<body>
		<!-- 
		 1、自己搭建页面
		 2、输入账号时，清空账号
		 3、选择商品时，显示价格
		 4、输入数量时，显示总价
		 5、点击确认，弹出确认信息
		 -->
		 <h2>
			 <span>购物信息</span>
		</h2>
		<!-- 
			1、form 暂时没有任何作用 当做一个普通的div
			2、label是form中专用的标签 ，暂时当成span
			3、使用块标签，把行标签包起来
		-->
		<!-- 表单自带记录功能：关闭记录功能 -->
		<form autocomplete="off">
			<div class="form-group">
				<label for="">账号</label>
				<input type="text" class="account">
			</div>
			<div class="form-group">
				<label for="">请选择商品</label>
				<select name="" class="goods">
					<option value="请选择">请选择</option>
					<option value="瓜子">瓜子</option>
					<option value="香烟">香烟</option>
					<option value="火腿肠">火腿肠</option>
				</select>
			</div>
			<div class="form-group">
				<label for="">单价</label>
				<input type="text" class="price" value="0.00">
			</div>
			<div class="form-group">
				<label for="">数量</label>
				<input type="text" class="num" value="1">
			</div>
			<div class="form-group">
				<label for="">总价</label>
				<input type="text" class="total" value="0.00">
			</div>
			<div class="form-group">
				<label for=""></label>
				<button type="button" class="btn">确认</button>
			</div>
		</form>
	</body>
</html>
